<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p v-once>一次性{{msg}}</p>
      <h1>{{rawHtml}}</h1>
      <h1 v-html="rawHtml"></h1>
      <!-- 小心xss攻击 -->

      <p :title="msg">xxxxxxxxx</p>

      <!-- <video src="" controls="controls"></video>
       -->
      <button :disabled="null">Button</button>

      <hr />
      <!-- 任意js表达式 -->
      <p>{{1 + 2}}</p>
      <p>{{5 > 2 ? 'T' : 'F'}}</p>
      <p>{{msg.split('').reverse().join('')}}</p>
      <p>{{reverseMsg()}}</p>
      <p>{{Math.random()}}</p>

      <hr />

      <p v-if="seen">条件为真可见</p>
      <p :title="msg">参数</p>
      <p @click="msg">事件</p>
      <a href="http://www.baidu.com" @click.prevent="clickHandler">修饰符</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          rawHtml: `<span style="color: red" onclick="alert(document.cookie)">hahahah</span>`,
          seen: true,
        },
        methods: {
          reverseMsg: function () {
            return this.msg.split("").reverse().join("");
          },
          clickHandler: function (event) {
            // event.preventDefault()
            console.log(123);
          }
        },
      });
    </script>
  </body>
</html>



<!-- 

var vm = new Vue({
  el
  data {
    a: null 必须有初始值
  }
  methods

  生命周期
  创建 挂载 更新 销毁

})
vm.$el
vm.$data
vm.$watch


组件 v-bind props  template





v-if
v-for

v-bind :
v-on @

v-model

v-once
v-html

v-text {{}}





 -->